<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本属性" name="1">
      <p>暂未实现，敬请期待！</p>
      <p style="color: darkred;">请使用 “开发者工具/模板管理/行编辑” 功能</p>
    </el-tab-pane>
    <el-tab-pane label="复杂结构" name="2">
      <div class = "routeManagement">
        <vue-json-editor v-model="treeJson" mode="code" :show-btns="true" :exapndedOnStart="true" @json-save="onJsonSave" lang="zh" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="复杂结构说明" name="3">
      <div class = "routeManagement">
        <vue-json-editor v-model="configJsonDesc" mode="code" :show-btns="false" :exapndedOnStart="true" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
    import vueJsonEditor from 'vue-json-editor'
    import { fetchById, editTreeJsonById } from './api/tmpt-list-api'

    export default {
        components: {
            vueJsonEditor
        },
        data() {
            return {
                activeName: '2',
                treeJson: {},
                configJsonDesc: {
                    "tree": {
                        "desc": '树结构，默认是自动寻找‘表名_id’字段作外键，生成自关联树',
                        "enable": '开启?true:false',
                        "label": "作为树的显示名称",
                        "fKeyName": "自关联外键名称。无则自动寻找‘表名_id’字段作外键。（暂未实现）"
                    },
                    "otm": {
                        "desc": 'OneToMany: 一对多中子表信息',
                        "enable": true,
                        "tableName": "子表名称（表名, 如: tmpt_auth_user）"
                    },
                    "asideTree":{
                        "desc": '左树右列表结构：左树是主表，右列表是子表',
                        "enable": true,
                        "fatherTableName": "主表名称（表名, 如: tmpt_auth_user）",
                        "sonTableName": "子表名称（表名, 如: tmpt_auth_user）"
                    }
                },
                otmJson: [
                    {msg: '暂未实现，敬请期待！'}
                ]
            };
        },
        props: {
            a1templatetableId: {
                type: Number,
                default: 0//10417
            }
        },
        watch: {
            'a1templatetableId': {
                immediate: true, // vue首次赋值不触发watch的解决方法
                handler: function(nval){
                    this.a1templatetableId = nval
                    this.handleFetchById()
                }
            }
        },
        methods: {
            handleFetchById() {
                fetchById({"id":this.a1templatetableId}).then( r => {
                    if (r.obj.treeJson) {
                      this.treeJson = JSON.parse(r.obj.treeJson)
                    }else{
                      this.treeJson = {}
                    }
                })
            },
            onJsonSave () {
                const data = {}
                data.id = this.a1templatetableId
                data.treeJson = JSON.stringify(this.treeJson)
                editTreeJsonById(data).then( r => {
                    this.notify(r)
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>

<style lang="scss" scoped>
  .routeManagement{
    width:98%;
    margin:16px auto;
    /deep/.jsoneditor-vue{
      height:500px;
    }
    /deep/.json-save-btn{
      cursor: pointer;
    }
  }
  /* jsoneditor右上角默认有一个链接,加css去掉了 */
  .jsoneditor-poweredBy{
      display: none;
  }
</style>
